import { Button, } from 'antd';
import GeneratorDrawer from '@/pages/generator/components/generatorDrawer';
import React, { useState, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getTableList, getTableInfo } from '@/services/generatorService'
import FormConfig from './components/formConfig';

const TableInfoList: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [currentRow, setCurrentRow] = useState<Generator.TableInfo>({} as Generator.TableInfo);
  const [isOpenConfig, setIsOpenConfig] = useState<boolean>(false);
  const [isOpenFormConfig, setIsOpenFormConfig] = useState<boolean>(false);

  const columns: ProColumns<Generator.TableInfo>[] = [
    {
      title: '表名',
      dataIndex: 'TableName',
      valueType: 'text',
    },
    {
      title: '描述',
      dataIndex: 'TableComment',
      valueType: 'text',
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <Button type='primary' key="config"
          onClick={() => {
            setCurrentRow(record);
            setIsOpenConfig(true);
          }}>配置</Button>,
        <Button type='primary' style={{ backgroundColor: 'green' }} color='green' key="config"
          onClick={() => {
            getTableInfo(record.TableName).then(response => {
              const { Items } = response;
              setCurrentRow(Items[0]);
              setIsOpenFormConfig(true);
            })
          }}>表单</Button>,
      ],
    },
  ];

  return (
    <>
      <PageContainer>
        <ProTable<Generator.TableInfo>
          headerTitle="查询表格"
          actionRef={actionRef}
          rowKey="key"
          search={{
            labelWidth: 120,
          }}
          toolBarRender={() => [
          ]}
          request={async (params, sorter) => {
            const searchParams: PageInfo.PageRequest = {
              pageSize: params.pageSize,
              current: params.current
            };

            let sortQuery = "", filterQuery = "";
            // eslint-disable-next-line guard-for-in
            for (const key in sorter) {
              sortQuery += `${key}|${sorter[key]}`;
            }
            searchParams['@sort'] = sortQuery;

            for (const key in params) {
              if (key !== "pageSize" && key !== "current") {
                filterQuery += `contains(${key},${params[key]})&`;
                params[key] = '';
              }
            }
            searchParams['@filter'] = filterQuery;
            const { Items, FilteredRecordCount } = await getTableList(searchParams);
            return {
              data: Items,
              success: true,
              total: FilteredRecordCount,
            } as any;
          }}
          columns={columns}
          rowSelection={{
            onChange: () => {
            },
          }}
        />
      </PageContainer>

      <GeneratorDrawer TableInfo={currentRow} closeEvent={setIsOpenConfig} isOpen={isOpenConfig} />
      {isOpenFormConfig ? <FormConfig TableInfo={currentRow} isOpen={isOpenFormConfig} closeEvent={setIsOpenFormConfig} /> : <></>}
    </>
  );
};

export default TableInfoList;
